<template>
  <div class="home">
    <div v-for="(item, index) in this.list" :key="index" @click="tan(item)">
      <dl>
        <dt>
          <img :src="item.img" alt />
        </dt>
        <dd>
          <h4>{{item.title}}</h4>
          <div class="divs">
            <p>￥{{item.price}}</p>
            <p>
              <button >-</button>
              {{item.num}}
              <button>+</button>
            </p>
          </div>
        </dd>
      </dl>
    </div>
    <div>
      <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
        <div v-for="(obj, index) in obj" :key="index">
          {{obj.title}}
          {{obj.price}} -----
          <button @click="jian(index)">-</button>
          {{obj.num}}
          <button @click="jia(index)">+</button>
        </div>

        <div>总价格:{{sum}}</div>
      </van-popup>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  data() {
    return {
      data: [],
      show: false,
      obj: [],
    
    };
  },
  created() {
    this.$store.dispatch("getlist");
    this.list = this.$store.state.data;

  },
  methods: {
    tan(item) {
      this.show = true;
      this.obj.push(item);
      console.log(this.obj);
    },
    jian(index) {
      this.obj[index].num--;
      if (this.obj[index].num<1) {
        this.obj[index].num=1
        alert('不能在减了')
      }
      
    },
    jia(index) {
      this.obj[index].num++;
    }
  },
  computed: {
    sum () {
      let zong=0
     for (let i = 0; i < this.obj.length; i++) {
       zong+=this.obj[i].price*this.obj[i].num
     }
     return zong
   
    },
    
  },
};
</script>
<style scoped>
dl {
  display: flex;
}
h4 {
  margin-right: 60px;
}
.divs {
  width: 150px;
  display: flex;
  justify-content: space-between;
}
</style>
